<script setup lang="ts">
import { getArea, setArea } from '@/service/api/sys/dataWarehouse/countryData'
import SvgIcon from '@/common/svg-icon/SvgIcon.vue'
import { ElMessage } from 'element-plus'
interface formType {
  year?: Number | String
  govOrgId?: Number | String
  area?: Number | String
  createDtm?: Number | String
  population?: Number | String
  partyMember?: Number | String
  updateDtm?: Number | String
  aloneOld?: Number | String
  insured?: Number | String
  poor?: Number | String
  villageCommittee?: Number | String
  disabled?: Number | String
  school?: Number | String
}
const props = defineProps({
  filterRule: {
    type: Object,
    default: () =>
      ({
        govOrgId: 1,
        year: 2023
      } as formType)
  }
})

const template = {
  year: 0,
  govOrgId: 0,
  area: 0,
  createDtm: '',
  population: 0,
  partyMember: 0,
  updateDtm: '',
  aloneOld: 0,
  insured: 0,
  poor: 0,
  villageCommittee: 0,
  disabled: 0,
  school: 0
}
const form = ref<formType>({}) // 表单源
const disabled = ref(false) // 当前可编辑的状态: 可编辑 不可编辑

// 获取区域概况 更改当前编辑状态未不可编辑
const updateArea = async () => {
  const res = await getArea(props.filterRule)
  form.value = res.data || Object.assign({}, template)
  disabled.value = false
}

// 监测传入的筛选条件改变, 获取数据
watch(
  () => props.filterRule,
  () => updateArea(),
  {
    immediate: true,
    deep: true
  }
)

// 更改编辑表单的内容, 利用div来做编辑的方法
const setForm = (field: string, val: any) => {
  const editType = form.value as { [k: string]: string | number }
  editType[field] = val
}

// 保存编辑
const changeDisabled = async () => {
  const editType = form.value as { [k: string]: string | number }
  console.log(props.filterRule)
  if (editType.govOrgId > 0 && editType.year > 0) {
    // 保存
    if (disabled.value) {
      setArea(form.value)
        .then(() => {
          ElMessage.success('修改成功!')
        })
        .catch(() => {
          ElMessage.error('修改失败!')
        })
      setTimeout(() => {
        updateArea()
      }, 500)
    }
    disabled.value = !disabled.value
  } else {
    ElMessage.warning('暂无数据, 无法编辑!')
  }
}
</script>

<template>
  <div class="warehouse">
    <div class="title">区域概况</div>
    <div class="content grid grid-cols-3 gap-3.5 p-3.5">
      <div class="item">
        <div class="label">面积</div>
        <div class="main">
          <div
            :contentEditable="disabled"
            v-text="form.area"
            @blur="setForm('area', $event.target.innerHTML)"
            class="text"
          />
          <span class="ml-1 text-[--auxiliary]">KM²</span>
        </div>
      </div>
      <div class="item">
        <div class="label">人口</div>
        <div class="main">
          <div
            :contentEditable="disabled"
            v-text="form.population"
            @blur="setForm('population', $event.target.innerHTML)"
            class="text"
          />
          <span class="ml-1 text-[--auxiliary]">户</span>
        </div>
      </div>
      <div class="item">
        <div class="label">党员</div>
        <div class="main">
          <div
            :contentEditable="disabled"
            v-text="form.partyMember"
            @blur="setForm('partyMember', $event.target.innerHTML)"
            class="text"
          />
          <span class="ml-1 text-[--auxiliary]">人</span>
        </div>
      </div>
      <div class="item">
        <div class="label">独居老人</div>
        <div class="main">
          <div
            :contentEditable="disabled"
            v-text="form.aloneOld"
            @blur="setForm('aloneOld', $event.target.innerHTML)"
            class="text"
          />
          <span class="ml-1 text-[--auxiliary]">人</span>
        </div>
      </div>
      <div class="item">
        <div class="label">参保人数</div>
        <div class="main">
          <div
            :contentEditable="disabled"
            v-text="form.insured"
            @blur="setForm('insured', $event.target.innerHTML)"
            class="text"
          />
          <span class="ml-1 text-[--auxiliary]">人</span>
        </div>
      </div>
      <div class="item">
        <div class="label">贫困人群</div>
        <div class="main">
          <div
            :contentEditable="disabled"
            v-text="form.poor"
            @blur="setForm('poor', $event.target.innerHTML)"
            class="text"
          />
          <span class="ml-1 text-[--auxiliary]">人</span>
        </div>
      </div>
      <div class="item">
        <div class="label">村委</div>
        <div class="main">
          <div
            :contentEditable="disabled"
            v-text="form.villageCommittee"
            @blur="setForm('villageCommittee', $event.target.innerHTML)"
            class="text"
          />
          <span class="ml-1 text-[--auxiliary]">人</span>
        </div>
      </div>
      <div class="item">
        <div class="label">残疾人</div>
        <div class="main">
          <div
            :contentEditable="disabled"
            v-text="form.disabled"
            @blur="setForm('disabled', $event.target.innerHTML)"
            class="text"
          />
          <span class="ml-1 text-[--auxiliary]">人</span>
        </div>
      </div>
      <div class="item">
        <div class="label">学校</div>
        <div class="main">
          <div
            :contentEditable="disabled"
            v-text="form.school"
            @blur="setForm('school', $event.target.innerHTML)"
            class="text"
          />
          <span class="ml-1 text-[--auxiliary]">所</span>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-link v-show="!disabled" :underline="false" @click="changeDisabled">
        <svg-icon name="icon-system-button-bianji" width="14px" height="12px" />
        <span class="text-[--theme]">编辑</span>
      </el-link>
      <el-button
        v-show="disabled"
        type="primary"
        class="button_function"
        @click="changeDisabled"
        size="small"
        >保存</el-button
      >
    </div>
  </div>
</template>

<style scoped></style>
